<template>
  <div class="xxcw-layout-home">
    <el-container class="layout-container">
      <el-aside :width="`${isCollapse ? 74 : 200}px`">
        <div class="logo color-white f-h-cc">
          <i class="el-icon-picture"></i>
        </div>
        <el-menu
          class="el-menu-vertical-demo"
          :collapse="isCollapse"
          background-color="#041E59"
          text-color="#fff"
          active-text-color="#fff">
          <template v-for="(item, i) in navList">
            <el-submenu
              v-if="item.children"
              :key="i"
              :index="item.id">
              <template slot="title">
                <i :class="item.icon"></i>
                <span>{{ item.name }}</span>
              </template>

              <template
                v-for="(item1) in item.children">
                <el-submenu
                  v-if="item1.children"
                  :key="item1.path"
                  :index="item1.id">
                  <template slot="title">
                    <i :class="item1.icon"></i>
                    <span>{{ item1.name }}</span>
                  </template>
                  <router-link
                    v-for="(item2) in item1.children"
                    :key="item2.path"
                    :to="item2.route">
                    <el-menu-item :index="item2.id">
                      <i :class="item2.icon"></i>
                      <span slot="title">{{item2.name}}</span>
                    </el-menu-item>
                  </router-link>
                </el-submenu>
                <router-link
                  v-else
                  :key="item1.path"
                  :to="item1.route">
                  <el-menu-item :index="item1.id">
                    <i :class="item1.icon"></i>
                    <span slot="title">{{item1.name}}</span>
                  </el-menu-item>
                </router-link>
              </template>
            </el-submenu>
            <router-link
              v-else
              :key="item.path"
              :to="item.route">
              <el-menu-item :index="item.id">
                <i :class="item.icon"></i>
                <span slot="title">{{item.name}}</span>
              </el-menu-item>
            </router-link>
          </template>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header class="f-between">
          <div class="left f-h-cc">
            <i
            class="c-p"
            :class="{'el-icon-s-fold': !isCollapse, 'el-icon-s-unfold': isCollapse}"
            @click="changeCollapse"></i>
            <Breadcrumb></Breadcrumb>
          </div>
          <div>
            <el-popover
              placement="top-start"
              width="50"
              trigger="hover"
              content="全屏">
              <i
                class="xxcw-icon-qp mr-20 c-p"
                slot="reference"
                @click="fullScreen"></i>
            </el-popover>
            <el-popover
              placement="top-start"
              width="50"
              trigger="hover"
              content="退出">
              <i
                class="xxcw-icon-tc font-20 c-p"
                slot="reference"
                @click="exitSystem"></i>
            </el-popover>
          </div>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import ElAside from 'element-ui/packages/aside/src/main'
import ElContainer from 'element-ui/packages/container/src/main'
import ElMain from 'element-ui/packages/main/src/main'
import ElHeader from 'element-ui/packages/header/src/main'
import Breadcrumb from '@/components/common/Breadcrumb'
import navList from '@/common/navBar'
import screenfull from 'screenfull'
export default {
  data () {
    return {
      isCollapse: false
    }
  },
  components: {
    ElAside,
    ElContainer,
    ElMain,
    ElHeader,
    Breadcrumb
  },
  methods: {
    changeCollapse () {
      this.isCollapse = !this.isCollapse
    },
    exitSystem () {
      this.$confirm('确定要退出系统, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '退出成功!'
        })
        this.$router.push('/')
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    fullScreen () {
      if (!screenfull.isEnabled) {
        this.$message({
          message: 'you browser can not work',
          type: 'warning'
        })
        return false
      }
      screenfull.toggle()
    }
  },
  created () {
    this.navList = navList
  }
}
</script>

<style lang="scss">
.el-popover {
  min-width: auto !important;
}
.el-popover--plain {
  padding: 8px !important;
}
.xxcw-layout-home {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  .layout-container {
    display: flex;
    height: 100%;
    .el-aside {
      background-color: #041E59;
      transition: all .5s;
      .logo {
        background-color: #0a1636;
        height: 56px;
        font-size: 20px;
      }
      ul {
        border: none;
      }
      .el-menu-item {
        // background-color: #0a1636 !important;
      }
      .el-menu-item.is-active {
        color: #409eff !important;
      }
    }
    .el-container {
      flex: 1;
      .el-header {
        position: relative;
        height: 56px;
        box-shadow: 0 1px 4px rgba(0,21,41,0.08);
        padding: 0 20px;
        font-size: 25px;
        padding-right: 40px;
      }
      .el-main {
        padding: 30px 20px;
      }
    }
  }
}
</style>
